import React, { useState, useEffect } from 'react';
import { PhotoProvider, PhotoConsumer } from 'react-photo-view';

import { NavBar, Icon, List, InputItem, Button, Modal } from 'antd-mobile';

import { previewPict } from "@/api/login";

import { getStudentDetails, PostDeleteStudent } from "@/api/parent/chilDinformation.js"

import './studentDetails.scss';

const alert = Modal.alert;

function StudentDetails (props) {

    const [studentDetailsObject, setStudentDetailsObject] = useState({
        paper_pict: ''
    })

    // 去修改
    let handleToUpDate = () => {
        props.history.push({
            pathname: '/student',
            params: {
                'type': 'update',
                'id': sessionStorage.getItem("student_id")
            }
        })
    }

    // 删除孩子信息
    let handleDel = () => {
        alert('删除', '您确定要删除此条孩子信息吗???', [
            { text: '取消' },
            {
                text: '确定', onPress: () => {
                    let postData = {
                        'id': studentDetailsObject.id
                    };
                    PostDeleteStudent(postData).then(res => {
                        if (res.code === '000000') {
                            alert('提示', '删除成功', [
                                {
                                    text: '知道了', onPress: () => {
                                        props.history.push({
                                            pathname: '/main',
                                            query: { selectedTab: "my" },
                                        })
                                    }
                                },
                            ])
                        }
                    }).catch(err => {
                        console.error(err);
                    })
                }
            },
        ]);
    }

    useEffect(() => {
        // 查看孩子详细信息 GET
        let postData = {};
        let id = sessionStorage.getItem("student_id");
        if (!!id) {
            postData.student_id = id;
        } else {
            id = props.location.params.id;
            postData.student_id = id; // 孩子ID
            sessionStorage.setItem("student_id", id);
        }
        getStudentDetails(postData).then(res => {
            if (res.code == '000000') {
                console.log('res -------->>>', res);
                setStudentDetailsObject(res.responseData)
            }
        }).catch(err => {

        })
    }, []);

    function leftClick () {
        sessionStorage.removeItem("student_id");
        props.history.push({
            pathname: '/studentList',
        })
    }

    return (
        <div className="student-details">
            <div className="page-title  student-tit">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={leftClick}
                    rightContent={[
                        <span key={"edit"} onClick={handleToUpDate}>编辑</span>,
                    ]}
                >
                    {studentDetailsObject.name} 学生信息
                </NavBar>
            </div>
            <div className="page-content student-content">
                <div className="student-content-piece">
                    <div className="form-box">
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>基本信息</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <List.Item extra={studentDetailsObject.name}>姓名</List.Item>
                                <List.Item extra={studentDetailsObject.gender}>性别</List.Item>
                                <List.Item extra={studentDetailsObject.grade}>年级</List.Item>
                                <List.Item extra={studentDetailsObject.age}>年龄</List.Item>
                                <List.Item extra={
                                    <div>
                                        <PhotoProvider>
                                            {
                                                (studentDetailsObject.paper_pict).split(',').map((item, index) => {
                                                    if (item != "") {
                                                        return <PhotoConsumer key={index} src={previewPict(item)} intro={''}  >
                                                            <img
                                                                key={index}
                                                                style={{
                                                                    width: 'auto',
                                                                    height: 'auto',
                                                                    maxHeight: '70px',
                                                                    maxWidth: '100px',
                                                                    margin: '0 5px'
                                                                }} src={previewPict(item)}
                                                                alt={"照片"}
                                                            />
                                                        </PhotoConsumer>
                                                    }
                                                })
                                            }
                                        </PhotoProvider>
                                    </div>
                                }
                                >学生证照片</List.Item>
                            </List>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>其他信息</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <InputItem
                                    editable={false}
                                    labelNumber="7"
                                >孩子情况简介</InputItem>
                                <List.Item wrap> {studentDetailsObject.note} </List.Item>
                            </List>
                        </div>
                        <div className="form-footer">
                            <p className="notes" />
                            <Button type="primary" onClick={handleDel}>删除</Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default StudentDetails;